<template>
    <div class="body">
        <div class="gd_hd_box">
            <div class="gd_hd_wrap">
                <h1>
                    <!-- <img
                        src="../../../../../../assets/img/hg/hg_logo.png"
                        alt=""
                    /> -->
                </h1>

                <dl>
                    <dt>
                        <span>科技管理信息网</span>
                    </dt>
                    <dd><i></i></dd>
                    <dd><span>2021年02月18日</span></dd>
                    <dd><i></i></dd>
                    <dd><span>北京 晴转多云 19°C～21°C</span></dd>
                </dl>
            </div>

            <div class="gd_hd_navbox">
                <ul>
                    <li
                        :class="{ gd_hd_active: icur === index }"
                        v-for="(item, index) in navList"
                        :key="index"
                        @click="icur = index"
                    >
                        {{ item }}
                    </li>
                </ul>
            </div>

            <div class="gd_he_search">
                <el-input v-model="input" placeholder="热点：科技司组织举办高分卫星应用专题研讨会" class="gd_de_input"></el-input>
                <el-button type="primary" class="gd_de_button">搜一下</el-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'test',
    data() {
        return {
            icur: 0,
            navList: [],
            input: '',
        };
    },
    mounted(){
    },
    methods: {},
};
</script>

<style lang="scss" scoped>
.body {
    overflow: hidden;
}

.gd_hd_box {
    height: 290px;
    // background: url('../../../../../../assets/img/hg/hg_bannertop.png') center
    //     center no-repeat;
    background-size: cover;

    .gd_hd_wrap {
        width: 1200px;
        margin: 0 auto;
    }

    .gd_hd_wrap {
        height: 60px;
        padding-top: 14px;

        h1 {
            float: left;
        }

        dl {
            float: right;
            padding-top: 13px;

            dd {
                float: left;

                i {
                    width: 1px;
                    background: #c5ddff;
                    height: 12px;
                    margin: 0 5px;
                    display: inline-block;
                }

                span {
                    font-size: 10px;
                    color: #c5ddff;
                }
            }

            dt {
                float: left;

                span {
                    font-size: 10px;
                    font-weight: 400;
                    color: #12d1ff;
                    text-decoration: underline;
                }
            }
        }
    }

    .gd_hd_navbox {
        border-bottom: 2px solid rgba(255, 255, 255, 0.1);
        width: 1200px;
        margin: 6px auto 0;
        height: 50px;

        ul {
            text-align: center;
            .gd_hd_active {
                border-color: #e3eeff;
            }
            li {
                display: inline-block;
                border-bottom: 2px solid transparent;
                font-size: 14px;
                font-weight: 500;
                color: #dfecff;
                padding: 10px 18px 0;
                line-height: 40px;
                cursor: pointer;
            }
        }
    }

    .gd_he_search {
        width: 600px;
        margin: 48px auto 0;
        height: 46px;
        background: #ffffff;
        border-radius: 4px;

        .gd_de_input{
            width: 514px;
            float: left;
            height: 46px;
            border: 0;

            .el-input__inner{
                height: 46px;
            }
        }

        .gd_de_button{
            width: 86px;
            height: 46px;
            float: right;
            border: 0;
        }
    }
}
</style>
